<!--
 * @Author: whflovecn
 * @Date: 2021-04-15 10:06:30
 * @LastEditTime: 2021-05-31 20:36:48
 * @LastEditors: whflovecn
 * @Description: 根据传入的item对象，生成菜单项或子菜单
 * @FilePath: \users-manager\src\pages\main\views\main\MenuItem.vue
-->
<template>
  <el-menu-item v-if="!item.children" :index="item.path" :key="item.id">
    <i v-if="item.icon" :class="item.icon"></i>
    <span slot="title">{{ item.title }}</span>
  </el-menu-item>
  <div v-else :key="item.code">
    <el-submenu :index="item.code" >
      <template slot="title">
        <i v-if="item.icon" :class="item.icon"></i>
        <span slot="title">{{ item.title }}</span>
      </template>
      <my-menu-item v-for="row in item.children" :item="row" :key="row.code"></my-menu-item>
    </el-submenu>
  </div>
</template>

<script>

export default {
  name:'MyMenuItem',
  props: {
    item: Object,
  },
};
</script>

<style lang="less">
.el-menu--collapse > div > .el-submenu > .el-submenu__title span {
  height: 0;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  display: inline-block;
}
.el-menu--collapse > div > .el-submenu > .el-submenu__title .el-submenu__icon-arrow {
  display: none;
}
</style>
